<template>
    <a-modal
        :title="modalType === 0 ? '添加菜单' : modalType === 1 ? '添加下级菜单' : '编辑菜单'"
        :visible="isShowModal"
        width="40%"
        :footer="null"
        dialogClass="custom-modal"
        @cancel="handleCancel"
        :maskClosable="false"
    >
        <a-form-model
            :model="form"
            ref="form"
            :labelCol="{ span: 6 }"
            :wrapperCol="{ span: 17 }"
            :rules="rules"
            :colon="false"
        >
            <a-row :gutter="10">
                <a-col :span="24" class="mb16">
                    <a-form-model-item label="上级菜单" prop="menuIds">
                        <a-cascader
                            :options="menuOptions"
                            :fieldNames="{
                                label: 'label',
                                value: 'id',
                                children: 'children',
                            }"
                            placeholder="请选择上级菜单"
                            v-model="form.menuIds"
                            allowClear
                            :disabled="modalType === 1"
                            changeOnSelect
                            @change="menuChange"
                        />
                    </a-form-model-item>
                </a-col>
                <a-col :span="24" class="mb16">
                    <a-form-model-item label="菜单类型" prop="type">
                        <a-select
                            placeholder="请选择菜单类型"
                            v-model.trim="form.type"
                            @change="
                                form.label = undefined
                                form.router = undefined
                            "
                        >
                            <a-select-option value="page">页面</a-select-option>
                            <a-select-option value="btn">按钮</a-select-option>
                        </a-select>
                    </a-form-model-item>
                </a-col>
                <a-col :span="24" class="mb16">
                    <a-form-model-item label="菜单名称" prop="label">
                        <a-input placeholder="请输入菜单名称" v-model.trim="form.label" allowClear />
                    </a-form-model-item>
                </a-col>
                <a-col :span="24" class="mb16">
                    <a-form-model-item label="菜单路由" prop="router" v-if="form.type === 'page'">
                        <a-input placeholder="请输入菜单路由" v-model.trim="form.router" allowClear />
                    </a-form-model-item>
                    <a-form-model-item label="按钮类型" prop="router" v-else-if="form.type === 'btn'">
                        <!-- defaultActiveFirstOption控制不了tags模式下 是否默认选中第一个 -->
                        <a-select
                            placeholder="请选择按钮类型"
                            v-model.trim="form.router"
                            mode="tags"
                            @change="routerBtnChange"
                            :defaultActiveFirstOption="true"
                        >
                            <a-select-option :value="getRouter() + ':add'">增加</a-select-option>
                            <a-select-option :value="getRouter() + ':edit'">编辑</a-select-option>
                            <a-select-option :value="getRouter() + ':look'">查看</a-select-option>
                            <a-select-option :value="getRouter() + ':del'">删除</a-select-option>
                            <a-select-option :value="getRouter() + ':export'">导出</a-select-option>
                            <a-select-option :value="getRouter() + ':batchImport'">批量导入</a-select-option>
                            <a-select-option :value="getRouter() + ':resetPassword'">重置密码</a-select-option>
                            <a-select-option :value="getRouter() + ':disabled/enabled'">停用/启用</a-select-option>
                            <a-select-option :value="getRouter() + ':verify'">审核</a-select-option>
                            <a-select-option :value="getRouter() + ':resetData'">数据重构</a-select-option>
                            <a-select-option :value="getRouter() + ':auth'">授权</a-select-option>
                        </a-select>
                    </a-form-model-item>
                </a-col>
                <!-- <a-col :span="24" class="mb16">
                    <a-form-model-item label="备注" prop="data">
                        <a-textarea
                            placeholder="请输入备注"
                            v-model.trim="form.data"
                            allowClear
                            :auto-size="{ minRows: 3, maxRows: 5 }"
                        />
                    </a-form-model-item>
                </a-col> -->
                <a-col :span="24">
                    <a-button type="primary" class="fr" @click="handleOk" :loading="confirmLoading">确定</a-button>
                </a-col>
            </a-row>
        </a-form-model>
    </a-modal>
</template>
<script>
import { getSelectedIds, getItemById } from '@/utils/methods'
import { menusApi } from '../../../../common/api/setting'
import router from '../../../router'

const disabledOptionsItem = (options, disabledIds = []) => {
    const find = data => {
        data.forEach(item => {
            if (disabledIds.includes(item.id) || item.router.includes(':')) {
                item.disabled = true
            } else {
                item.disabled = false
                if (item.children?.length) {
                    find(item.children)
                }
            }
        })
    }
    find(options)
}
export default {
    data() {
        return {
            confirmLoading: false,
            form: {
                label: '',
                router: '',
                iconType: undefined,
                menuIds: undefined,
                type: 'page',
                data: '',
            },
            rules: {
                label: [{ required: true, message: '请输入菜单名称', trigger: 'blur' }],
                router: [{ required: true, message: '该项必填', trigger: 'blur' }],
                type: [{ required: true, message: '请选择菜单类型', trigger: 'blur' }],
            },
        }
    },
    components: {},
    computed: {},
    props: {
        isShowModal: {
            required: true,
            type: Boolean,
        },
        currRow: {
            required: false,
            type: [Object, undefined],
        },
        menuOptions: {
            required: false,
            type: Array,
            default: () => [],
        },
        modalType: {
            required: true,
            type: Number,
        },
    },
    watch: {
        isShowModal: {
            immediate: true,
            handler: function (isShowModal) {
                if (isShowModal) {
                    this.beforeShowModal()
                } else {
                    this.$refs.form && this.$refs.form.resetFields()
                }
            },
        },
    },
    beforeDestroy() {
        this.$refs.form && this.$refs.form.resetFields()
    },
    methods: {
        routerBtnChange(value) {
            console.log(value, 'value')
            this.form.router = Array.isArray(value) ? value.slice(-1)[0] : value
        },
        menuChange() {
            this.form.router = undefined
        },
        getRouter() {
            return (getItemById(this.menuOptions, this.form.menuIds && this.form.menuIds.slice(-1)[0]) || {}).router
        },
        beforeShowModal() {
            disabledOptionsItem(this.menuOptions, this.currRow && this.modalType === 2 ? [this.currRow.id] : [])
            if (this.currRow) {
                console.log(this.menuOptions, 'his.menuOptions')
                const { label, router, iconType, id, permissionPid, data } = this.currRow
                if (this.modalType === 1) {
                    // 添加下级
                    Object.assign(this.form, {
                        menuIds: getSelectedIds(this.menuOptions, id, 'permissionPid'),
                    })
                } else if (this.modalType === 2) {
                    // 编辑
                    Object.assign(this.form, {
                        type: router.includes(':') ? 'btn' : 'page',
                        label,
                        router,
                        iconType: iconType || undefined,
                        menuIds: getSelectedIds(this.menuOptions, permissionPid, 'permissionPid'),
                        data,
                    })
                }
            }
        },
        async save() {
            const { label, router, iconType, menuIds, data } = this.form
            console.log(menuIds, 'menuIds', menuIds && menuIds.length ? menuIds.slice(-1)[0] : '')
            if (this.modalType === 2) {
                // 编辑
                await menusApi.edit({
                    label,
                    router,
                    iconType,
                    id: this.currRow.id,
                    permissionPid: menuIds && menuIds.length ? menuIds.slice(-1)[0] : '',
                    data,
                    type: 1,
                })
            } else {
                // 添加
                await menusApi.add({
                    label,
                    router,
                    iconType,
                    permissionPid: menuIds && menuIds.length ? menuIds.slice(-1)[0] : '',
                    data,
                    type: 1,
                })
            }
        },
        async handleOk() {
            this.confirmLoading = true
            this.$refs.form.validate(async valid => {
                console.log(valid, 'valid')
                if (valid) {
                    this.save()
                        .then(() => {
                            this.$emit('update:isShowModal', false)
                            this.$message.success('操作成功,请重新登录')
                            this.$emit('getTableData')
                        })
                        .catch(e => {
                            console.log(e)
                        })
                        .finally(() => {
                            this.confirmLoading = false
                        })
                } else {
                    this.confirmLoading = false
                    return false
                }
            })
        },
        handleCancel() {
            this.$emit('update:isShowModal', false)
        },
    },
}
</script>
<style scoped></style>
